<template>
    <div>
        <div style="padding: 10px;" align="center">
            图例
        </div>
        <div style="overflow: auto;height: 200px">
            <template v-for="item in legendValue" v-if="item.ifShow === true">
                <el-row class="title">{{item.name}}</el-row>
                <template v-for="item2 in item.value" v-if="item.type === 'polygon'">
                    <el-row style="margin: 10px">
                        <div class="polygon" v-bind:style="{background: item2.color}"></div>
                        <div class="text">{{item2.name}}</div>
                    </el-row>
                </template>

                <template v-for="item2 in item.value" v-if="item.type === 'line'">
                    <el-row style="margin: 10px">
                        <div class="line" v-bind:style="{background: item2.color}"></div>
                        <div class="text">{{item2.name}}</div>
                    </el-row>
                </template>

                <template v-for="item2 in item.value" v-if="item.type === 'point'">
                    <el-row style="margin: 10px">
                        <div class="point" v-bind:style="{background: item2.color}"></div>
                        <div class="text">{{item2.name}}</div>
                    </el-row>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                legendValue: [],
            }
        },
        created() {
            let that = this;
            this.$Bus.$on("legendInfo", (res) => {
                var flag = 0;
                for (var i = 0; i < that.legendValue.length; i++) {
                    if (that.legendValue[i].id === res.id) {
                        flag = 1;
                        that.legendValue[i].name = res.name;
                        that.legendValue[i].type = res.type;
                        that.legendValue[i].ifShow = res.ifShow;
                        that.legendValue[i].value = res.value;
                        break;
                    }
                }
                if (flag === 0)
                    that.legendValue.push(res);
            });
        },
        methods: {}
    }
</script>

<style scoped>

    .title {
        margin: 10px;
        font-weight: bold;
    }

    .polygon {
        height: 15px;
        width: 15px;
        border: 1px solid white;
        box-shadow: lightgrey 0px 0px 2px 2px;
        float: left;
    }

    .line {
        margin-top: 6px;
        height: 3px;
        width: 15px;
        border: 1px solid white;
        box-shadow: lightgrey 0px 0px 2px 2px;
        float: left;
    }

    .point {
        height: 15px;
        width: 15px;
        border: 1px solid white;
        box-shadow: lightgrey 0px 0px 2px 2px;
        float: left;
        border-radius: 50%;
    }

    .text {
        margin-left: 10px;
        float: left;
    }

</style>